<template>
	<view class="" style="padding-bottom: 80px;">
		<!-- <view class="main-wrap" :class="{show:loaded}"> -->
		<view class="order-info-con">
			<view class="order-info" style="font-size: 26upx;font-weight: bold;color: #2781A7;">衣物详情</view>
			<view class="" v-for="(item, index) in dataList" :key="index">
				<view class="order-info row between">
					<view class="cart-item-img">
						<image :src="item.newImage" mode="aspectFill" class="img" v-if="item.newImage != ''"></image>
						<image :src="item.icon" mode="aspectFill" class="img" v-else></image>
					</view>
					<view class="cart-item-right fill">
						<view class="row between fill">
							<view class="clamp cart-item-title">{{ item.name }}</view>
							<view class="row">
								<view class="item-btn" hover-class="hover-opacity" :id="`Baojia${index}`" :class="{ 'b-btn': item.isSupport == 1 }" @tap="userBaojia(item)">
									保价
								</view>
								<view class="item-btn " hover-class="hover-opacity" style="margin-left: 16upx;" :class="{ 'a-btn': item.isPack == 1 }" :id="`Baozhuang${index}`"
									@tap="userBaozhuang(item)">包装
								</view>
							</view>
						</view>
						<view class="row" style="padding-top: 10upx;">
							<view>
								<text class="cart-item-num">洗涤:</text>
								<text class="cart-item-price">{{ item.washCost | price }}</text>
							</view>
							<view style="margin-left: 14upx;" v-if="item.isSupport == 1">
								<text class="cart-item-num">保价:</text>
								<text class="cart-item-price">{{ item.supportFee | price }}</text>
							</view>
							<view style="margin-left:14upx;" v-if="item.isPack == 1">
								<text class="cart-item-num">包装:</text>
								<text class="cart-item-price">{{ BaojiaBiLi.packFee }}</text>
							</view>
						</view>
						<view class="row between item-bottom">
							<view class="row">
								<text class="cart-item-num" style="color:#000000;">衣物价值:</text>
								<input
									type="text"
									:id="`input${index}`"
									value=""
									v-model="item.value"
									placeholder="请填写衣物价值"
									class="item-input "
									maxlength="5"
									confirm-type="done"
									@input="changeItemPrice($event, item)"
								/>
							</view>
							<view hover-class="hover-opacity"><image src="/static/img/jian.png" mode="" class="y-btn" @tap="clearItem(item)"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-info-con">
			<view class="order-info" style="font-size: 26upx;font-weight: bold;color: #2781A7;">订单信息</view>
			<view class="">
				<view class="row between" style="padding:20upx 20upx;" hover-class="hover-dark" @tap="navTo(`/pages/address/myAddress?id=${address.id}&source=1`)">
					<view class="order-info-t">下单地址</view>
					<view class="order-info-input" v-if="address.id">
						<view class="">
							<text style="font-size: 26upx;">{{ address.name }}</text>
							<text style="font-size: 26upx;">{{ address.phone }}</text>
						</view>
						<view class="" style="font-size: 26upx;">{{ address.province }}{{ address.city }}{{ address.county }}{{ address.detail }}</view>
					</view>
					<input type="text" value="" disabled placeholder="请选择" class="order-info-input" placeholder-style="color:#bcbcbc" v-else />

					<u-icon name="arrow-right" size="22" color="#999999"></u-icon>
				</view>
				<view class="row between" style="padding:20upx 20upx;" hover-class="hover-dark" @tap="navTo(`/pages/leader/list?id=${leader.id}`)">
					<view class="order-info-t">选择团长</view>
					<view class="order-info-input" v-if="leader.id">
						<view class="">
							<text style="font-size: 26upx;">{{ leader.name }}</text>
							<text style="font-size: 26upx;">{{ leader.phone }}</text>
						</view>
						<view class="" style="font-size: 26upx;">{{ leader.addressDetail }}</view>
					</view>
					<input type="text" value="" disabled placeholder="团长昵称" class="order-info-input" placeholder-style="color:#bcbcbc" v-else />

					<u-icon name="arrow-right" size="22" color="#999999"></u-icon>
				</view>
				<view class="row between" style="padding:20upx 20upx;" hover-class="hover-dark" @tap="showPopup('mixTime')">
					<view class="order-info-t">取件时间</view>
					<input type="text" value="" v-model="time" disabled placeholder="请选择" class="order-info-input" placeholder-style="color:#bcbcbc" />
					<u-icon name="arrow-right" size="22" color="#999999"></u-icon>
				</view>
				<view class="row between" style="padding:20upx 20upx;" hover-class="hover-dark" @tap="userClickCompline">
					<view class="order-info-t">优惠券</view>
					<view class="order-info-input cart-item-price" style="color:#FE2525;" v-if="compline.id">{{ compline.money }}</view>
					<view class="order-info-input" v-else>请选择</view>
					<!-- <input type="text" value="" v-model="compline.price" disabled placeholder="请选择" class="" /> -->
					<u-icon name="arrow-right" size="22" color="#999999"></u-icon>
				</view>
				<view class="row between" style="padding:20upx 20upx;">
					<view class="order-info-t">备注</view>
					<input type="text" value="" v-model="remarks" placeholder="如有问题请备注留言" class="order-info-input" placeholder-style="color:#bcbcbc" confirm-type="done" />
					<u-icon name="arrow-right" size="22" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<view class="order-footer row between">
			<view class="row">
				<text class="order-footer-tips">合计:</text>
				<text class="cart-item-price">{{ totalPrice }}</text>
				<text class="" style="font-size: 26upx;color: #999999;margin-left: 40upx;">共{{ totalNum }}件</text>
			</view>
			<view class="order-footer-btn" hover-class="hover-opacity" @tap="subOrder">去支付</view>
		</view>
		<!-- </view> -->

		<mix-time ref="mixTime" @confirm="setTime"></mix-time>
		<mix-loading v-if="isLoading"></mix-loading>
		<order-guide></order-guide>
	</view>
</template>

<script>
import mixTime from '@/components/mix-time/mix-time.vue';
import orderGuide from '@/components/order-guide/index.vue';
export default {
	components: {
		mixTime,
		orderGuide
	},
	data() {
		return {
			goodsIds: '',
			dataList: [],
			complineList: [], //  优惠券
			compline: {},
			address: {},
			leader: {},
			totalPrice: 0,
			totalNum: 0,
			pickUpTimeStart: '', //取件开始时间
			pickUpTimeEnd: '', //取件结束时间
			time: '',
			remarks: '',
			BaojiaBiLi: {
				reachMoney: '', //商品满x元
				washAddProportion: '', //洗涤费额外增加n%
				bjCostProportion: '', //报价费用比例
				packFee: '' //包装费用
			}
		};
	},
	onLoad() {
		this.dataList = getApp().globalData.cartInfo.cartList;
		this.totalNum = getApp().globalData.cartInfo.totalNum;
		this.goodsIds = this.dataList.map(item => item.id).join(',');
		this.getBaojiaBiLi();
		this.calPrice();
		this.getUserAddress();
	},
	watch: {
		compline: {
			handler(newval) {
				console.log(newval);
				let price = this.totalPrice - newval.money;
				this.totalPrice = price.toFixed(2);
			},
			deep: true
		}
	},
	methods: {
		subOrder() {
			this.$util.throttle(async () => {
				if (!this.address.id) {
					this.$util.msg('请选择地址!');
					return;
				}
				if (!this.leader.id) {
					this.$util.msg('请选择团长!');
					return;
				}
				let len = 0;
				this.dataList.forEach(item => {
					if (item.isSupport == 1 && item.newImage == '') {
						len++;
					}
					if (item.isSupport == 1 && item.newImage != '') {
						item.icon = item.newImage;
					}
				});
				if (len > 0) {
					this.$util.msg('保价衣物请上传真是图片!');
					return;
				}
				const data = {
					goodsList: this.dataList,
					addressId: this.address.id,
					tzId: this.leader.id,
					pickUpTimeStart: this.pickUpTimeStart,
					pickUpTimeEnd: this.pickUpTimeEnd,
					couponId: this.compline.id,
					remarks: this.remarks,
					uid: uni.getStorageSync('uid'),
					sum: this.totalPrice
				};
				console.log(data);
				const res = await this.$request('order/create', data, { showLoading: true });
				if (res.result == 0) {
					uni.redirectTo({
						url: `/pages/order/payorder?id=${res.data.orderId}&money=${res.data.sum}`
					});
				} else {
					this.$util.msg(res.resultNote);
				}
			});
		},
		changeItemPrice(e, item) {
			let value = e.detail.value;
			if (value == '') {
				item.isSupport = 0;
			} else {
				item.isSupport = 1;
			}
			this.calPrice();
		},
		clearItem(v) {
			v.value = '';
			v.isSupport = 0;
			this.calPrice();
		},
		userClickCompline() {
			let goodsIds = this.dataList.map(item => item.id).join(',');
			console.log(goodsIds);
			this.navTo(`/pages/compline/compline?goodsIds=${goodsIds}&sum=${this.totalPrice}`);
		},
		async getBaojiaBiLi() {
			const res = await this.$request('order/proportion', {}, { showLoading: true });
			if (res.result == 0) {
				this.BaojiaBiLi = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getUserAddress() {
			const res = await this.$request('address/list', { uid: uni.getStorageSync('uid') }, { showLoading: true });
			if (res.result == 0) {
				if (res.dataList.length != 0) {
					res.dataList.forEach(item => {
						if (item.isDefault == 1) {
							this.address = item;
						}
					});
				}
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getCompline() {
			const data = {
				uid: uni.getStorageSync('uid'),
				pageNo: '1',
				pageSize: '9999999'
			};
			const res = await this.$request('coupon/can-use', data, { showLoading: true });
			if (res.result == 0) {
				this.complineList = res.data.list;
				this.calComplineIn();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		calComplineIn() {
			let array = [];
			this.complineList.forEach(item => {
				if (this.totalPrice > item.money) {
					if (item.type == 0) {
						let a = this.goodsIds.split(',');
						let b = item.goodsIds.split(',');
						let c = [...new Set(a.concat(b))];
						let abl = a.length + b.length;
						if (c.size != abl) array.push(item);
					}
					if (item.type == 1 && this.totalPrice > item.reachPrice) {
						array.push(item);
					}
				}
			});
			if (array.length != 0) {
				let newArray = array.sort((a, b) => {
					return b.money - a.money;
				});
				this.compline = newArray[0];
			}
		},
		calPrice() {
			let price = 0;
			const { washAddProportion, bjCostProportion, packFee } = this.BaojiaBiLi;
			this.dataList.forEach(item => {
				let productRealPrice = item.value != '' ? item.value : 0;
				if (item.isSupport == 1) {
					item.supportFee = (productRealPrice * 100 * bjCostProportion) / 100;
					if (Number(item.productRealPrice) >= Number(item.reachMoney)) {
						item.washCost = ((item.productRealPrice - item.reachMoney) * 100 * washAddProportion) / 100 + (Number(item.price) * 100 * item.count) / 100;
					} else {
						item.washCost = (Number(item.price) * 100 * item.count) / 100;
					}
				} else {
					item.washCost = (Number(item.price) * 100 * item.count) / 100;
					item.supportFee = 0;
				}
				if (item.isPack == 1) {
					item.packFee = Number(packFee);
				} else {
					item.packFee = 0;
				}
				price += item.packFee + item.washCost + item.supportFee;
			});
			if (this.compline.id) {
				price -= this.compline.money;
			}
			this.totalPrice = price.toFixed(2);
			if (this.complineList.length == 0) {
				this.getCompline();
			} else {
				this.calComplineIn();
			}
		},
		userBaojia(v) {
			if (v.value == '') {
				this.$util.msg('请先填写衣物价值!');
				return;
			}
			this.chooseImage(v);
		},
		//选择图片
		chooseImage(item) {
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
				success: res => {
					console.log(res);
					this.uploadFiles(res.tempFiles, item);
				}
			});
		},
		//上传图片
		async uploadFiles(files, v) {
			console.log(files);
			const item = {
				filePath: files[0],
				progress: 0,
				type: 0
			};
			const result = await this.$uploadFile('uploadFile', item);
			console.log(result);
			const res = JSON.parse(result);
			if (res.result == 0) {
				v.newImage = res.url;
				this.$forceUpdate();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		userBaozhuang(v) {
			v.isPack == 0 ? (v.isPack = 1) : (v.isPack = 0);
			this.calPrice();
		},
		setTime(e) {
			this.pickUpTimeStart = `${e.current.date} ${e.time.starTime}`;
			this.pickUpTimeEnd = `${e.current.date} ${e.time.endTime}`;
			this.time = `${e.current.date} ${e.time.time}`;
		},
		findTime() {
			this.$refs.mixTime.open();
		},
		setAddress(item) {
			item ? (this.address = item) : (this.address = {});
		}
	}
};
</script>
<style scoped lang="scss">
.order-info-t {
	font-size: 28upx;
	color: #333333;
}
.order-info-input {
	flex: 1;
	text-align: right;
	padding: 0 10upx;
	font-size: 26upx;
	color: #bcbcbc;
}
.y-btn {
	width: 50upx;
	height: 50upx;
}
.item-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-right: 20upx;
}
.item-input {
	font-size: 24upx;
	color: #999999;
	padding-left: 20upx;
}
.order-info-con {
	border-top: 10upx solid rgba(240, 240, 240, 0.3);
	border-bottom: 10upx solid rgba(240, 240, 240, 0.3);
}
.order-info {
	padding: 20upx;
}
.cart-item-img {
	width: 160upx;
	height: 160upx;
	border-radius: 20upx;
	overflow: hidden;
}
.img {
	width: 160upx;
	height: 160upx;
}
.cart-item-right {
	padding-left: 20upx;
	height: 160upx;
	position: relative;
}
.cart-item-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
	line-height: 36upx;
	max-width: 290upx;
}
.cart-item-price {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fe2525;
	line-height: 36upx;
}
.cart-item-price::before {
	content: '￥';
	font-size: 20upx;
}
.item-btn {
	width: 98upx;
	height: 42upx;
	line-height: 42upx;
	text-align: center;
	background: #e4e8ef;
	border-radius: 10upx;
	font-size: 24upx;
	color: #5d7399;
}
.b-btn {
	background: #2781a7;
	color: #ffffff;
}
.a-btn {
	background: #6aae59;
	color: #ffffff;
}
.cart-item-num {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.order-r-title {
	line-height: 80upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.textarea {
	width: 100%;
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
}
.order-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	border-top: 1px solid rgba(215, 215, 215, 0.31);
	height: 120upx;
	background: #ffffff;
	padding: 0 20upx;
	z-index: 999;
}
.order-footer-btn {
	width: 216upx;
	height: 66upx;
	background: #2781a7;
	border-radius: 33upx;
	text-align: center;
	line-height: 66upx;
	font-size: 30upx;
	color: #ffffff;
}
.order-footer-tips {
	font-size: 28upx;
	color: #333333;
	margin-right: 14upx;
}
.order-footer-money {
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
}
</style>
